<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "workSheet"
});
import { ref, reactive, onMounted, watch, onBeforeUnmount } from "vue";
import { getWorkSheetList, editWorkSheet } from "@/api/worksheet";
import tip from "@/assets/tip.mp3";

onMounted(async () => {
  workPage.user_id = localStorage.getItem("user_id");
  getList();
  audio.value.load();
  startTimer()
});
const getList = async () => {
  if (user_type == '1') {
    workPage.user_id = '';
  };
  let res = await getWorkSheetList(workPage);
  console.log("工单数据", res);
  tableData.value = res.data.data;
  total.value = res.data.count;
}

interface User {
  sheet_id: number;
  user_id: number;
  container_id: string;
  title: string;
  content: string;
  sheet_type: string;
  created_at: string;
  state: number;
}

const search = ref("");
const user_type = localStorage.getItem("user_type");
const workPage = reactive({
  page: 1,
  count: 10,
  user_id: ""
});
const total = ref(20);
const handleCurrentPageChange = async newPage => {
  workPage.page = newPage;
  getList()
};
const handlePageSizeChange = async newSize => {
  workPage.count = newSize;
  getList()
};
let tableData = ref([]);
const readit = async (data) => {
  if (data.state != 4 && user_type == '1') {
    //更改状态为管理员已读
    let res = await editWorkSheet({ sheet_id: data.sheet_id, state: 1 })
    console.log("更改状态", res);
  }
}

// 关闭工单
const handleDelete = async (index: number, row: User) => {
  let res = await editWorkSheet({ sheet_id: row.sheet_id, state: 4 })
  console.log("更改状态", res);
  //更新数据
  let res2 = await getWorkSheetList(workPage);
  tableData.value = res2.data.data;
};
// 提示音
const audio = ref(new Audio(tip))
const tips = () => {
  audio.value.currentTime = 0;
  audio.value.play().catch((error) => console.error("播放提示音失败:", error));
}
// 计时器
let intervalId: number;
const timer = ref(30);
const startTimer = () => {
  intervalId = setInterval(() => {
    if (timer.value <= 0) {
      timer.value = 30;
      clearInterval(intervalId);
      updatalist()
      startTimer()
    } else {
      timer.value -= 1;
    }
  }, 1000);
};
// 更新数据
const updatalist = async () => {
  let { data } = await getWorkSheetList(workPage);
  if (data.data[0]) {
    if (tableData.value[0].sheet_id != data.data[0].sheet_id) {
      tips()
      tableData.value = data.data
    }
  }
}
onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
})

</script>

<template>
  <div class="body">
    <div class="table_box">
      <el-table class="table_el" :data="tableData" style="width: auto">
        <el-table-column label="ID" prop="sheet_id" width="60" />
        <el-table-column label="容器ID" prop="container_id" show-overflow-tooltip />
        <el-table-column label="工单标题" prop="title" />
        <el-table-column label="类型" prop="sheet_type" width="90" />
        <el-table-column label="购买时间" prop="created_at" show-overflow-tooltip />
        <el-table-column>
          <template #header>工单状态</template>
          <template #default="scope">
            <el-tag :type='scope.row.state == 0
              ? "warning"
              : scope.row.state == 1
                ? "primary"
                : scope.row.state == 2
                  ? "success"
                  : scope.row.state == 3
                    ? "success"
                    : "info"'> {{
                      scope.row.state == 0
                        ? "管理员未阅读"
                        : scope.row.state == 1
                          ? "管理员已阅读"
                          : scope.row.state == 2
                            ? "管理员已回复"
                            : scope.row.state == 3
                              ? "客户已阅读"
                              : "工单关闭"
                    }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200">
          <template #header>
            <el-input v-model="search" size="small" placeholder="关键字筛选" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="readit(scope.row)"><router-link :to="'/workSheet/workContent?sheet_id=' +
              scope.row.sheet_id
              ">查看</router-link></el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table_pagination">
        <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="workPage.page"
          :page-size="workPage.count" :page-sizes="[10, 20, 50,100]" @update:current-page="handleCurrentPageChange"
          @update:page-size="handlePageSizeChange" />
      </div>
    </div>
  </div>
</template>

<style>
.table_box {
  display: flex;
  flex-direction: column;
  height: 50%;
}

.table_box .table_el {
  flex: 1;
}

.table_pagination {
  display: flex;
  justify-content: space-between;
  padding: 8px 30px;
  background-color: #fff;
}
</style>
